<template>
  <view class="container">
		<view class="headImg">
			<image src="../../static/iStock8.jpg" mode="aspectFill"></image>
		</view>
    <view class="dataBody">
    	<unicloud-db ref="udb" v-slot:default="{data, pagination, loading, hasMore, error}"
    	:collection="collectionList" 
    	:where="sWhere"
    	field="user_id,start_time,end_time,datas,calorie,shabao">
    	  <view v-if="error">{{error.message}}</view>
    	  <view v-else-if="data">
    	    <uni-list :border="false">
    	      <uni-list-item v-for="(item, index) in data" :key="index" showArrow :clickable="true" @click="handleItemClick(item._id)">
    	        <template v-slot:body>
    	          <view class="myItem">
    	          	<view class="itemDate">
    	          		<uni-dateformat :date="item.start_time"></uni-dateformat>
    	          	</view>
    	          	<view class="itemCalorie">
    	          		{{item.calorie}} 千卡
    	          	</view>
    	          	<view class="itemLong">
    	          		时长 {{timeLong(item.end_time-item.start_time)}}
    	          	</view>
    	          </view>
    	        </template>
    	      </uni-list-item>
    	    </uni-list>
    	  </view>
    	  <uni-load-more :status="loading?'loading':(hasMore ? 'more' : 'noMore')"></uni-load-more>
    	</unicloud-db>
    </view>
  </view>
</template>

<script>
  const db = uniCloud.database()
  export default {
    data() {
      return {
				src: "/static/iStock8.jpg",
        collectionList: "batch",
				sWhere: '',
        loadMore: {
          contentdown: '',
          contentrefresh: '',
          contentnomore: ''
        }
      }
    },
		onLoad:function(option){
			// this.sWhere = 'user_id=="'+option.user_id+'"'
			this.sWhere = 'user_id=="6426ea520c801c2ac910dd97"'
		},
    onPullDownRefresh() {
      this.$refs.udb.loadData({
        clear: true
      }, () => {
        uni.stopPullDownRefresh()
      })
    },
    onReachBottom() {
      this.$refs.udb.loadMore()
    },
    methods: {
      handleItemClick(id) {
        uni.navigateTo({
          url: './detail?id=' + id
        })
      },
			timeLong(milliseconds) {
			  // 计算总共有多少秒
			  var totalSeconds = Math.floor(milliseconds / 1000);			
			  // 计算有多少小时
			  var hours = Math.floor(totalSeconds / 3600);			
			  // 剩余的秒数
			  var secondsLeft = totalSeconds % 3600;			
			  // 计算分钟数
			  var minutes = Math.floor(secondsLeft / 60);			
			  // 剩余的秒数
			  var seconds = secondsLeft % 60;			
			  // 把时、分、秒都补全成两位数
			  if (hours < 10) {
			    hours = "0" + hours;
			  }
			  if (minutes < 10) {
			    minutes = "0" + minutes;
			  }
			  if (seconds < 10) {
			    seconds = "0" + seconds;
			  }			
			  // 组合时分秒
			  return hours + ":" + minutes + ":" + seconds;
			}
    }
  }
</script>

<style>
	.container{
		/* background-color: #473E97;
		height: 100vh; */
	}
	.headImg{
		position: fixed;
		top: 0;
		width: 100%;
		height: 200px;
	}
	.headImg image{
		width: 100%;
	}
	.dataBody{
		margin-top: 200px;
	}
	.myItem{
		display: flex;
		flex-direction: column;
		margin-left: 30px;
	}
	.itemDate,.itemLong{
		display: flex;
		color: #CCCCCC;
		font-size: 10px;
	}
	.itemCalorie{
		display: flex;
		color: #333333;
		font-size: 20px;
		font-weight: bold;
	}
</style>
